---
id: consent
title: Implementing the Consent Endpoint & UI
sidebar_label: Consent Endpoint
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import CodeFromRemote from '@theme/CodeFromRemote'

:::note

Please read the [Consent Flow Documentation](../concepts/consent.mdx) first!

:::

In this document, you will learn how to implement the Consent Endpoint using our
ORY Hydra SDKs. The goal for this document is to have document this for multiple
programming languages. If you are an expert in one of these languages, your help
is highly appreciated in improving these docs!

Code shown here is taken out of the ORY Hydra Login & Consent Node Reference
application which you can find on GitHub.

[![ory/hydra-login-consent-node - GitHub](https://gh-card.dev/repos/ory/hydra-login-consent-node.svg)](https://github.com/ory/hydra-login-consent-node)

## Implementing the Consent HTML Form

:::note

The Consent HTML Form cannot be a Single Page App (Client-side browser
application) or a Mobile App! It has to be a server-side application with access
to ORY Hydra's Admin Endpoint!

:::

<Tabs
  defaultValue="ui"
  values={[
    {label: 'UI', value: 'ui'},
    {label: 'NodeJS', value: 'node'},
    {label: 'HTML Example', value: 'html'},
  ]}>
  <TabItem value="ui">

![OAuth2 Consent UI Screen](../images/consent-endpoint.png)

  </TabItem>
  <TabItem value="node">
    <CodeFromRemote
      src="https://github.com/ory/hydra-login-consent-node/blob/master/src/routes/consent.ts"
    />
  </TabItem>
  <TabItem value="html">
    <CodeFromRemote
      src="https://github.com/ory/hydra-login-consent-node/blob/master/views/consent.pug"
    />
  </TabItem>
</Tabs>

## Accepting the Consent Request

<Tabs defaultValue="node" values={[{ label: 'NodeJS', value: 'node' }]}>
  <TabItem value="node">
    <CodeFromRemote
      startAt="let grantScope = req.body.grant_scope"
      endAt="// label:docs-accept-consent"
      src="https://github.com/ory/hydra-login-consent-node/blob/master/src/routes/consent.ts"
    />
  </TabItem>
</Tabs>

## Rejecting the Consent Request

<Tabs defaultValue="node" values={[{ label: 'NodeJS', value: 'node' }]}>
  <TabItem value="node">
    <CodeFromRemote
      startAt="if (req.body.submit === 'Deny access') {"
      endAt="// label:consent-deny-end"
      src="https://github.com/ory/hydra-login-consent-node/blob/master/src/routes/consent.ts"
    />
  </TabItem>
</Tabs>

## Skipping Consent Screen

<Tabs defaultValue="node" values={[{ label: 'NodeJS', value: 'node' }]}>
  <TabItem value="node">
    <CodeFromRemote
      startAt="// This section processes consent requests and either shows the consent UI"
      endAt="// The consent request has now either been accepted automatically"
      src="https://github.com/ory/hydra-login-consent-node/blob/master/src/routes/consent.ts"
    />
  </TabItem>
</Tabs>

## Complete Endpoint

<Tabs defaultValue="node" values={[{ label: 'NodeJS', value: 'node' }]}>
  <TabItem value="node">
    <CodeFromRemote src="https://github.com/ory/hydra-login-consent-node/blob/master/src/routes/consent.ts" />
  </TabItem>
</Tabs>
